<template>
	<view>
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
			:vertical="true" @animationfinish="animationfinish" @change="change" :current="current"
			:indicator-dots="false" :circular="true">
			<swiper-item v-for="(list,index) in dataList" :key="index">
				<view v-if="k==index">

					<video-player v-if="isShow"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
						@error="error" @getsource="getsource" @ended="ended" :albumId="list.album_id"
						:episodeId="list.episode_id" :cloud-type="1" :version="1" autoplay enable-progress-gesture />

					<view v-if="!isShow" @click="click_tvimg()">
						<image :src="dataList[k].tv_image" mode="aspectFit"
							:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'">
						</image>
					</view>

				</view>
			</swiper-item>
		</swiper>


		<view class="userInfo">
			<!-- 2.点赞 -->

			<view @click="cLike(dataList[k].like)"
				style="opacity: 0.9; margin-top: 17px;display: flex;flex-direction: column;align-items: center;">
				<image v-if="dataList[k].like" src="@/static/xin.png" style="width: 40px; height: 40px;">
				</image>
				<image v-if="!dataList[k].like" src="@/static/xin-2.png" style="width: 40px; height: 40px;">
				</image>

				<view class="xuanjiStyle" :class="{'likeNumActive':dataList[k].like}">
					{{dataList[k].like_num>-1?vk.pubfn.calcSize(dataList[k].like_num, ["","万"], 10000, 1).title:1}}
				</view>
			</view>

			<!-- 4.分享 -->
			<view style="opacity: 0.9; margin-top: 40rpx;">
				<view style="opacity: 0;">
					<u-button openType="share" text="分享"></u-button>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;margin-top: -90rpx;">
					<image src="@/static/wx1.png" style="pointer-events: none;width: 68rpx; height: 68rpx;">
					</image>
					<text class="xuanjiStyle">分享</text>
				</view>
			</view>
			<!-- //选集 -->
			<view style="opacity: 0.9;margin-top: 30rpx;display: flex;flex-direction: column;align-items: center;">
				<image src="@/static/xj.png" style="width: 65rpx;height: 65rpx;" @click="toVideoDetail(dataList[k])">
				</image>
				<text @click="toVideoDetail(dataList[k])" class="xuanjiStyle">看全集</text>
			</view>
		</view>

		<!-- 最底下的文字部分 -->
		<view class="content" @click="toVideoDetail(dataList[k])">
			<view class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">{{dataList[k].title||""}}</view>
			<view class="words" :style="'width: '+ (windowWidth - 90) +'px;'">{{dataList[k].desc||""}}</view>
		</view>



	</view>
</template>

<script>
	const db = uniCloud.database();
	const _ = db.command;

	export default {
		components: {

		},
		data() {
			return {
				isShow: false,
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				deleteHeight: 0,
				dataList: [],
				k: 0,
				current: 0,
				boxStyle: { //视频，图片封面样式
					'height': 0,
					'width': 0,
				},
			}
		},
		watch: {
			k(k, old_k) {
				console.log("k=", k, "old_k=", old_k);
				this.isShow = false;

				//延迟0.5秒，用户观感更顺滑
				setTimeout(() => {
					this.isShow = true;
				}, 500)

				//判断数据库里是否有点赞记录，有则点亮图标
				db.collection('a_like').where({
					user_id: vk.vuex.get('$user.userInfo._id'),
					series_id: this.dataList[k]._id,
				}).count().then(res => {
					const total = res.result.total
					if (total > 0) {
						this.dataList[k].like = true
					}
				})

				//获取点赞数量
				db.collection('a_tv_series').doc(this.dataList[k]._id).field({
					like_num: true
				}).get().then(res1 => {
					this.dataList[k].like_num = res1.result.data[0].like_num
				})

				//获取整部剧的简介
				db.collection('a_tv').doc(this.dataList[k].tv_id).field({
					desc: true
				}).get().then(res2 => {
					if (res2.result.data.length > 0) {
						this.dataList[k].desc = res2.result.data[0].desc;
					} else {
						this.dataList[k].desc = "";
					}
				})

				//判断数据库点赞记录结束
			}
		},
		async onLoad(option) {

			let appid = vk.vuex.get('$app.appid');

			this.dataList = [];
			this.dataList = uni.getStorageSync('dataList');

			// 如果后台未设置推荐视频,则弹窗提示
			if (!this.dataList || this.dataList.length == 0) {
				uni.showModal({
					title: '提示',
					content: '暂无推荐视频',
					showCancel: false,
					confirmText: "返回首页", // 确认按钮的文字  
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					}
				})
				return;
			}

			//=====为第一个推荐视频获取简介开始=====
			let firstDesc = await db.collection('a_tv').doc(this.dataList[0].tv_id).field({
				desc: true
			}).get()
			if (firstDesc.result.data.length > 0) {
				this.dataList[0].desc = firstDesc.result.data[0].desc || "";
			} else {
				this.dataList[0].desc = "";
			}
			//=====为第一个推荐视频获取简介结束=====


			this.platform = uni.getSystemInfoSync().platform
			var model = uni.getSystemInfoSync().model
			if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' ||
					model !== 'iPhone8')) {
				this.deleteHeight = 80 //有 tabbar的 修改这里可以改变视频高度
			}
			// this.windowWidth = uni.getSystemInfoSync().windowWidth
			// this.windowHeight = uni.getSystemInfoSync().windowHeight
			// this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			// this.boxStyle.height = this.windowHeight - this.deleteHeight; //有 tabbar的 修改这里可以改变视频高度
		},
		async onShow() {
			// 如果后台未设置推荐视频,则弹窗提示
			if (!this.dataList || this.dataList.length == 0) {
				uni.showModal({
					title: '提示',
					content: '暂无推荐视频',
					showCancel: false,
					confirmText: "返回首页", // 确认按钮的文字  
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					}
				})
				return;
			}

			console.log('回到前台');
			this.isShow = true;
		},
		onHide() {
			// this.isShow = false;
			console.log('页面隐藏');
		},
		// onShareAppMessage() {
		// 	console.log("触发分享");
		// },
		async onReady() {
			try {
				var res = tt.getSystemInfoSync();
				console.log(`手机型号为 ${res.model}`);
				console.log("获取系统信息", res.windowHeight);
				this.platform = tt.getSystemInfoSync().platform
				var model = tt.getSystemInfoSync().model
				if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' ||
						model !==
						'iPhone8')) {
					this.deleteHeight = 50 //有 tabbar的 修改这里可以改变视频高度
				}
				this.windowWidth = tt.getSystemInfoSync().windowWidth;
				this.windowHeight = tt.getSystemInfoSync().windowHeight;
				this.videoHeight = tt.getSystemInfoSync().windowHeight - 70;

			} catch (error) {
				console.log(`获取系统信息失败`);
			}
		},
		methods: {
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}

				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id,
				})
			},
			error(e) {
				console.log("e=======", e);
			},
			getsource(e) {
				const a = tt.canIUse('video-player.bindgetsource')
				console.log("a================", e);

			},
			ended() {
				if (this.k == this.dataList.length - 1) {
					this.isShow = false;
					uni.showModal({
						content: "已播放完全部剧集",
						showCancel: false,
						confirmText: "返回",
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}
						}
					})
				} else {
					this.current = this.k + 1
				}
			},
			//开始播放触发
			play(tv_id) {
				console.log(tv_id + "开始播放啦");
			},
			change(event) {
				this.k = event.detail.current
			},
			async animationfinish(event) {
				// 1.这里进行判断，如果是最后3个视频就加载视频进入列表
				if (this.k < this.dataList.length - 3) {
					let add_tj_tv = await db.collection('a_tv_series').where({
							is_recommend: true
						})
						.skip(30).limit(100).get()
					for (var i = 0; i < add_tj_tv.result.data.length; i++) {
						add_tj_tv.result.data[i].like = false;
					}
					this.dataList = this.dataList.concat(add_tj_tv.result.data)
				}
			},

			cLike(like_state) {
				//like_state代表是点赞还是取消点赞，点赞是false,取消是true
				console.log("like_state=", like_state);
				this.dataList[this.k].like = !this.dataList[this.k].like
				const video = this.dataList[this.k];
				like_state ? video.like_num -= 1 : video.like_num += 1;
				//操作数据库，点赞则新增一条点赞记录，取消点赞则删除记录
				vk.callFunction({
					url: 'client/video/pub/click_like',
					data: {
						like_state: like_state,
						user_id: vk.vuex.get('$user.userInfo._id'),
						nickname: vk.vuex.get('$user.userInfo.nickname') || "匿名用户",
						tv_name: this.dataList[this.k].tv_name,
						tv_id: this.dataList[this.k].tv_id || "no",
						tv_image: this.dataList[this.k].tv_image,
						series: this.dataList[this.k].series,
						series_id: this.dataList[this.k]._id,
					},
					success: (data) => {
						console.log("云函数执行完成");
					}
				})
			},
			dingyue() {
				var that = this;
				uni.requestSubscribeMessage({
					tmplIds: vk.vuex.get('$app.msglist'),
					success(res) {
						console.log("订阅成功");
						vk.callFunction({
							url: 'client/user/kh/dingyue',
							showLoading: false,
							data: {
								msglist: vk.vuex.get('$app.msglist'),
								platform: "weixin",
								tv_id: that.dataList[that.k].tv_id,
								tv_name: that.dataList[that.k].tv_name,
							},
						})
					}
				})
			},
			follow_tv() {
				var that = this;
				this.dingyue()
				console.log("点击追剧");
				vk.callFunction({
					url: 'client/follow_tv/pub/add',
					data: {
						user_id: vk.vuex.get('$user.userInfo._id'),
						nickname: vk.vuex.get('$user.userInfo.nickname') || '匿名用户',
						tv_name: that.dataList[that.k].tv_name,
						tv_id: that.dataList[that.k].tv_id,
						series: that.dataList[that.k].series,
						series_id: that.dataList[that.k]._id,
						tv_image: that.dataList[that.k].tv_image,
						is_follow: true,
					},
					success: (data) => {
						console.log("添加追剧成功");
					}
				});
			},
			click_tvimg() {
				this.isShow = true;
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: '/pages_sub/detail/detail?id=' + id
				})
			},
		}
	}
</script>

<style>
	.xuanjiStyle {
		color: #FFFFFF;
		/* margin-top: 5px; */
		font-size: 14px;
		font-weight: bold;
		/* text-align: center; */
	}

	.userInfo {
		z-index: 999;
		position: absolute;
		bottom: 110px;
		right: 10px;
		display: flex;
		flex-direction: column;
	}

	.likeNumActive {
		color: red;
	}

	.content {
		width: 720rpx;
		z-index: 99;
		position: absolute;
		bottom: 30px;
		/* justify-content: center; */
		padding: 15rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
	}

	.userName {
		font-size: 30rpx;
		color: #ffffff;
		margin-top: 80upx;
		text-decoration: underline;
	}

	.words {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
	}

	/* 短剧资讯 */
	.News_box {
		margin-top: 20rpx;
		display: flex;
		/* justify-content: space-evenly; */
		flex-direction: row;
		align-items: center;
	}

	.News_image {
		width: 340rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.News_title {
		width: 330rpx;
		font-size: 30rpx;
		/* font-weight: 300; */
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
</style>